{% extends "base.jinja" %}
{% block content %}
  <div class="container">
    <div class="box"><p class="title is-4">{{ listing['title'] }}</p>
    {% if 'subtitle' in listing %}<p class="subtitle is-6">{{ macros.render_element(listing['subtitle']) }}</p>{% endif %}
    </div>
                    {#- iterate over items #}
{% for item in listing['items'] %}
<div id="{{ item['anchor-id'] }}" class="box">
  {%- if 'for adults' in item['Keyword'] %}
  <article class="message is-warning is-size-7">
    <div class="message-header"><p>Warning</p></div>
    <div class="message-body">This entry is marked as "for adults" and may feature explicit content.</div>
  </article>
  {%- endif %}
                    {#- title and platform, activity, state as a level item (all on one line) -#}
  <nav class="level">
    <div class="level-left">
      <div class="level-item title is-4">{{ item['name'] }}</div>
    </div>
    <div class="level-right is-size-7">
      {%- for state in item['state'] -%}
      <div class="level-item">{{ macros.render_element(state) }}</div>
      {%- endfor -%}
    </div>
  </nav>
                    {#- keywords as tags, no note currently #}
  <div class="block">
    {{ macros.render_element(item['keyword']) }}
  </div>
                    {#- important fields in a certain order #}
  <div class="block">
  {%- for field in ('homepage', 'media', 'inspiration', 'download', 'play online') -%}
    {%- if field in item -%}{{ macros.render_element(item[field]) }}<br>{%- endif -%}
  {%- endfor -%}
  </div>
                    {#- screenshots if available #}
  {%- if 'screenshots' in item%}<nav class="level">
  {%- for screenshot in item['screenshots'] -%}
    <div class="level-item">{{ macros.render_element(screenshot) }}</div>
  {%- endfor -%}
  </nav>{% endif -%}
                    {#- technical fields #}
  <div class="block is-size-6">
    <span class="has-text-weight-semibold">Details</span><br>
    {%- for field in ('code language', 'code license', 'code repository', 'code dependency', 'assets license', 'build system', 'developer') -%}
    {%- if field in item -%}
      {%- if item[field][1]['entries']|length > 10 -%}
      <details><summary>{{ macros.render_element(item[field][0]) }} ({{ item[field][1]['entries']|length }})</summary><br>{{ macros.render_element(item[field][1]) }}</details>
      {%- else -%}
      {{ macros.render_element(item[field]) }}
      {%- endif -%}
    <br>{%- endif -%}
    {%- endfor -%}
  </div>
                    {#- improve, raw #}
  <div class="block is-size-7 has-text-right">
    <a href="{{ base['url_to'](['contribute.html#games']) }}" title="Contribution guide" class="mr-2">Improve</a>
    <a href="{{ item['raw-path'] }}" title="Text based entry on Github">Raw entry</a>
  </div>
</div>{#- of box -#}
{% endfor %}
  <p class="is-size-7 has-text-right"><a href="#">Back to top</a></p>
  </div>
{% endblock %}